<!--
 * @Author: your name
 * @Date: 2021-09-02 16:15:48
 * @LastEditTime: 2021-10-18 15:59:20
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: /psychiatric-interview-uni/src/components/ray-sort/ray-sort.vue
-->
<template>
	<view class="sort-container" @click.native="sortClick()">
        <view class="title-wrap">{{ title }}</view>
        <view class="image-container">
            <image class="image-icon"
                :src="sortValue ? 
                    (
                        sortValue == '0' ? 
                        '/static/imgs/icon/icon_sort_up.png' 
                        : '/static/imgs/icon/icon_sort_down.png'
                    )
                    : '/static/imgs/icon/icon_sort_common.png'"
            >
            </image>
        </view>
	</view>
</template>

<script>
	export default {
        props: {
            /**
             * 标题
             */
            title: {
            	type: String,
            	default: ''
            },
            /**
             * 排序值，0或者1
             */
            sortValue: {
            	type: String,
                default: ''
            },
            
            /**
             * 回调函数方法名，默认为sortChange
             */
            sortChange: {
            	type: String,
            	default() {
            		return 'sortChange';
            	}
            },
		},
		data() {
			return {
                
			}
		},
        computed: {
            
        },
		methods: {
            sortClick() {
                let __this = this;
                let temp = '0';
                if (this.sortValue == '0') {
                    temp = '1';
                }
                //  else if (this.sortValue == '1') {
                //     // 增加取消排序功能 add by ray on 2021/03/20
                //     temp = '';
                // }
                // let temp = !this.sortValue ? 0 : (this.sortValue == 0 ? 1 : 0);
                __this.$emit('update:sortValue', temp);
                __this.$emit(__this.sortChange, { sortValue: temp });
            }
		}
	}
</script>

<style lang="scss" scoped>
    .sort-container {
        background-color: #ffffff;
        align-items: center;
        width: 100%;
        // padding: 20rpx;
        justify-content: center;
        
        .title-wrap {
            font-size: 28rpx;
            color: #666666;
        }
        
        .image-container {
            margin-left: 5rpx;
            align-items: center;
            margin-top: 10rpx;
            .image-icon {
                width: 36rpx;
                height: 36rpx;
            }
        }
    }
    
</style>
